<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>模型返回结果</title>
    <!-- 引入 MathJax 3 的 CDN 链接 -->
    <script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js">
    </script>
    <script type="text/javascript">
        // MathJax 3 配置
        window.MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']], // 配置行内公式分隔符
                displayMath: [['$$', '$$'], ['\\[', '\\]']], // 配置块级公式分隔符
                processEscapes: true, // 允许在公式中使用转义字符
            },
            options: {
                ignoreHtmlClass: "no-mathjax", // 忽略带有此类的元素中的公式
                processHtmlClass: "mathjax", // 只处理带有此类的元素中的公式
                renderActions: {
                }
            },
            chtml: {
                linebreaks: { automatic: true } // CHTML 输出的自动换行
            },
            svg: {
                linebreaks: { automatic: true } // SVG 输出的自动换行
            }
        };
    </script>
    <!-- 直接引入 QWebChannel 的 JS 文件 -->
    <script type="text/javascript" src="./qwebchannel.js"></script>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
            overflow-y: hidden;
            font-size: < !-- FONT_SIZE_PLACEHOLDER -->px;
        }

        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        code {
            font-family: monospace;
        }

        .hidden {
            display: none;
        }

        /* 为渲染内容区域设置字体大小 */
        #rendered-content {
            font-size: < !-- FONT_SIZE_PLACEHOLDER -->px;
        }

        #rendered-content * {
            font-size: inherit;
        }

        #raw-content pre {
            font-size: < !-- FONT_SIZE_PLACEER -->px;
        }
    </style>
    <script>
        // JavaScript 函数来切换显示模式
        function showRendered() {
            document.getElementById('rendered-content').style.display = 'block';
            document.getElementById('raw-content').style.display = 'none';
            // 重新渲染 MathJax，以防内容是后来添加的
            if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
                MathJax.typesetPromise(); // 重新排版整个文档
            }
            // 切换后获取高度
            if (window.updateHeight) { // 检查Python注入的函数是否存在
                window.updateHeight();
            }
        }

        function showRaw() {
            document.getElementById('raw-content').style.display = 'block';
            document.getElementById('rendered-content').style.display = 'none';
            // 切换后获取高度
            if (window.updateHeight) { // 检查Python注入的函数是否存在
                window.updateHeight();
            }
        }

        // 当内容大小改变时通知Qt
        const observer = new MutationObserver(function (mutations) {
            if (window.updateHeight) {
                window.updateHeight();
            }
        });

        // 监听body及其子元素的DOM变化
        document.addEventListener('DOMContentLoaded', () => {
            observer.observe(document.body, {
                attributes: true,
                childList: true,
                subtree: true,
                characterData: true
            });
        });

        // 初始化时默认显示渲染内容
        window.onload = function () {
            setTimeout(function () {
                try {
                    showRendered();
                    console.log("showRendered called successfully on load");
                } catch (e) {
                    console.error("Error calling showRendered on load:", e);
                }
            }, 200);
        };
    </script>
</head>

<body>
    <div id="rendered-content">
        < !-- RENDERED_CONTENT_PLACEHOLDER -->
    </div>

    <div id="raw-content" class="hidden">
        <pre>< !-- RAW_CONTENT_PLACEHOLDER --></pre>
    </div>
</body>

</html>